<template>
  <section class="bg-white relative lg:pt-8 pb-8">
    <img
      src="@/assets/img/left.png"
      class="w-12 h-[128px] absolute left-0 top-24 lg:block hidden"
      alt=""
    />
    <the-hero img="ai1" class="lg:!pb-20 pb-12 lg:pb-40">
      <template #title>智能视频分析与应用平台 </template>
      <template #subtitle>
        <div>为客户打造低成本的AI整体解决方案</div>
        <div class="mt-4 lg:text-lg text-xs">
          低成本 · 即插即用 · 定制算法，最快3天出新算法
        </div>
      </template>
      <template #button>
        <el-button type="primary" @click="$store.commit('SQ')"
          >申请试用</el-button
        >
        <el-button class="!ml-10" type="info" @click="$store.commit('ZX')"
          >立即咨询</el-button
        >
      </template>
    </the-hero>

    <div class="container mx-auto">
      <ul
        class="
          lg:mt-10
          grid
          lg:grid-cols-4
          grid-cols-2
          lg:gap-10
          gap-x-4 gap-y-6
          pl-8
          lg:pl-0
        "
      >
        <li class="flex items-center" v-for="item in list" :key="item.title">
          <img class="lg:w-16 lg:h-16 w-12 h-12" :src="item.icon" alt="" />
          <div class="lg:ml-4 ml-[10px]">
            <span class="relative lg:text-3xl text-2xl text-black font-medium"
              >{{ item.num }}
              <span
                class="
                  absolute
                  text-red
                  lg:text-2xl
                  text-base
                  lg:-top-4 lg:-right-3
                  -top-2
                  -right-2
                "
                >+</span
              >
            </span>
            <div class="text-gray-99 lg:text-sm text-xs">{{ item.title }}</div>
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import icon1 from "@/assets/img/ai-icon1.png";
import icon2 from "@/assets/img/ai-icon2.png";
import icon3 from "@/assets/img/ai-icon3.png";
import icon4 from "@/assets/img/ai-icon4.png";

import theHero from "@/components/hero.vue";

export default {
  components: { theHero },
  data() {
    return {
      list: [
        { title: "累计算法", num: 200, icon: icon1 },
        { title: "解决方案", num: 50, icon: icon2 },
        { title: "服务企业", num: 500, icon: icon3 },
        { title: "行业覆盖", num: 30, icon: icon4 },
      ],
    };
  },
};
</script>

<style>
</style>